<template>
	<view class="refund_index">
		<view class="detail_index">
			<view class="tips_title">
				<span>退款商品</span>
			</view>
			<view class="shop_detail">
				<view class="pic_content">
					<image :src="itemData.machineProduct.realProductImgUrl" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title1">
						{{itemData.machineProduct.productName}}
						<span>￥{{itemData.machineProduct.price}}</span>
					</view>
					<!-- <view class="description">
						超熟睡420柔棉感量多夜用纤巧棉柔 4片/包
					</view>
					<view class="category">
						棉柔|夜用
					</view> -->
				</view>
			</view>
			<view class="pay_value">
				实付款 ￥ <span class="chart">{{itemData.payValue.slice(0,1)}}</span> {{itemData.payValue.slice(1)}}元
			</view>
		</view>
		<view class="detail_index">
			<ul class="uls_line">
				<li>
					<span>退款金额 <span class="title_square">*</span> </span>
					<span>{{itemData.payValue}}元</span>
				</li>
			</ul>
		</view>
		<view class="detail_index">
			<view class="tips_title_next">
				<span>补充描述</span>
			</view>
			<view class="description_container">
				<u--textarea showConfirmBar count adjustPosition height="350" v-model="description"
					disableDefaultPadding placeholder="补充描述，有助于更好的处理退款问题"></u--textarea>
			</view>
			<u-button type="primary" @click="handleSubmit">提交申请</u-button>
		</view>
	</view>
</template>

<script>
	import {
		rebackOrder
	} from '@/api/order.js'
	export default {
		onLoad({
			item
		}) {
			let jsonItem = decodeURIComponent(item)
			this.itemData = JSON.parse(jsonItem)
			console.log(this.itemData);
		},
		data() {
			return {
				itemData: {},
				description: ''
			}
		},
		methods: {
			handleSubmit() {
				if (!this.description) return
				rebackOrder(this.itemData.outTradeNo, this.description).then(res => {
					wx.showToast({
						title: res.data
					})
					if (res.code === 200) {
						uni.navigateBack(-1)
					}
				}).catch(err => {
					wx.showToast({
						title: err,
						icon: 'none'
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.refund_index {
		width: 100%;
		padding: 40rpx 0;

		.detail_index {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			// margin-top: -30rpx;
			width: 95%;
			margin: -20rpx auto;
			margin-bottom: 40rpx;

			.uls_line {
				font-size: 1.1rem;

				li {
					padding: 20rpx 20rpx;
					border-bottom: 4rpx solid #e9e9e9;
					display: flex;
					justify-content: space-between;
					align-items: center;


					.title_square {
						display: inline-block;
						color: #ffdfe0;
						border-radius: 50%;
					}
				}

				li span:first-child {
					display: flex;
					justify-content: space-around;
				}
			}

			.item_container {
				display: flex;
				flex-direction: column;

				.item_info {

					display: flex;
					align-items: center;
					justify-content: space-between;

					.info_item {}

					image {
						padding: 0 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.tips_title {
				font-size: 36rpx;
				text-align: left;
				color: #F86853;
				padding: 0rpx 20rpx;
			}

			.tips_title_next {
				font-size: 32rpx;
				text-align: left;
				padding: 0rpx 20rpx;
			}

			.description_container {
				margin: 30rpx 20rpx;

			}

			.shop_detail {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				padding: 20rpx;

				.pic_content {
					width: 30%;

					image {
						width: 100%;
					}
				}

				.content {
					width: 70%;
					margin-left: 20rpx;

					.title1 {
						font-size: 36rpx;

						span {
							font-size: 38rpx;
							float: right;
							font-weight: bold;
						}

					}

					.description {
						margin: 20rpx 0;
						letter-spacing: 0.10rem;
					}

					.category {
						font-size: 24rpx;
						color: #B0B0B0;
					}
				}
			}

			.pay_value {
				text-align: right;
				font-size: 1.15rem;
				padding: 20rpx;

				.chart {
					font-size: 1.4rem;
				}
			}

			.price_title {
				// float: right;
				text-align: right;
				font-size: 38rpx;
				margin: 20rpx 70rpx;
			}

			.param_container {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-right: 20rpx;

				.cancleBtn {
					background-color: #fff;
					border: 1px solid #ccc;
					color: black;
				}

				/deep/ .u-count-down text {
					color: #F86853;
				}

				button {
					padding: 10rpx 40rpx;
					margin: 20rpx;
					border-radius: 40rpx;
				}

				button {
					background-color: #fff;
					color: #F86853;
					border: 1px solid #F86853;
				}
			}

			.shop_info_desc {
				padding: 20rpx;

				.shop_item {
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.value {
						color: #A9A9A9;
					}
				}
			}
		}

	}
</style>